import React, { useState } from "react";
import "./CreateTopicModal.css";

const CreateTopicModal = ({ onClose, onCreate }) => {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [image, setImage] = useState(null);
  const [imageURL, setImageURL] = useState("");

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      setImage(file);
      setImageURL(URL.createObjectURL(file));
    }
  };

  const handleSubmit = () => {
    if (!name || !description) {
      alert("名称和简介不能为空！");
      return;
    }
    onCreate({ name, description, image });
    onClose();
  };

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <h2>创建话题</h2>
        <div className="input-group">
          <label>名称</label>
          <input
            type="name-text"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div className="input-group">
          <label>简介</label>
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
        </div>
        <div className="input-group">
          <label>图片</label>
          <div className="topic-image-upload">
            <label>
              <div className="plus-icon">+</div>
              <input type="file" onChange={handleImageUpload} style={{ display: 'none' }} />
            </label>
            {image && <img src={imageURL} alt="Preview" className="topic-image-preview" />}
          </div>
        </div>
        <div className="modal-buttons">
          <button onClick={onClose}>取消</button>
          <button onClick={handleSubmit}>创建</button>
        </div>
      </div>
    </div>
  );
};

export default CreateTopicModal;
